import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import Ground2D from '../jsm/Ground2D.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);

    //图形预处理,是否反转Y轴
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)

    //激活纹理单元
    gl.activeTexture(gl.TEXTURE0);
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    const image = new Image();
    image.src = '../Images/Image04.png';
    //这种导入方法只能导入图片长宽为2的N次方大小的图片
    image.onload = function () {
        gl.texImage2D(
            gl.TEXTURE_2D,
            0,
            gl.RGB,
            gl.RGB,
            gl.UNSIGNED_BYTE,
            image
        );
        //设置纹理
        gl.texParameteri(
            gl.TEXTURE_2D,//二维纹理
            gl.TEXTURE_MIN_FILTER,//纹理缩小滤波器(当图片源比显示框大的时候进行等比缩小)
            gl.LINEAR//线性
        );
        const u_Sampler = gl.getUniformLocation(gl.program, "u_Sampler");
        gl.uniform1i(u_Sampler, 0);//gl.TEXTURE0激活的是0

        poly.draw(["TRIANGLE_STRIP"]);
    };


    let allArr = [
        -0.5, -0.5, 10, 0.0, 0.0,
        -0.5, 0.5, 10, 0.0, 1.0,
        0.5, -0.5, 10, 1.0, 0.0,
        0.5, 0.5, 10, 1.0, 1.0,
    ];

    let poly = new Poly({
        gl: gl,
        arr: allArr,
        list: [
            { name: 'a_Position', size: 2, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 2 },
            { name: 'a_Pin', size: 2, beginIndex: 3 },
        ],
    });




    poly.draw(["TRIANGLE_STRIP"]);








}